<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <h2>测试：v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
            ---<button @click="deleteP(index)">删除</button>
            ---<button @click="updateP(index,{name: 'Cat', age: 20})">更新</button>
        </li>
    </ul>
    <h2>测试：v-for 遍历对象</h2>
    <ul v-for="(value, key) in persons[1]" :key="key">
        {{value}}---{{key}}
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //vue本身只是监视了persons的改变，没有监视数组内部数据的改变
    //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）---》数组内部改变，界面自动变化
    new Vue({
        el: "#demo",
        data: {
            persons: [
                {name: "Tom", age: 18},
                {name: "Jack", age: 16},
                {name: "Bob", age: 19},
                {name: "Rose", age: 17}
            ]
        },
        methods: {
            deleteP(index){
                //删除persons中指定index的p
                this.persons.splice(index,1);
            },
            updateP(index,newP){
                //this.persons[index] = newP;//并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
                //this.persons = [];
                this.persons.splice(index,1,newP);
            }
        }
    })
</script>
</body>
</html>